<template>
  <div class="tool-box">
    <p class="left line"></p>
    <p class="top line"></p>
    <p class="right line"></p>
    <p class="bottom line"></p>
    <div class="tool u-f">
      <span class="name u-f u-f-ac">{{ name }}</span>
      <span class="delete-icon u-f u-f-ac">
        <DeleteFilled class="icon" @click="handleDelete" />
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DeleteFilled } from '@ant-design/icons-vue'
import { useRoute } from 'vue-router'
import { useAppMock } from '@/hooks/usePageJson'
import { BasicItem } from '@/assets/ts/basic-material/basic-components.type'

export default defineComponent({
  name: 'MaterialTool',
  props: {
    selectkey: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
  components: {
    DeleteFilled,
  },
  setup(props) {
    const route = useRoute()

    const { appInfo, currentPage } = useAppMock(route.params.id as string)

    const handleDelete = () => {
      const page = appInfo.pages.find((item) => {
        return item.key === currentPage.value
      })

      getBlock(page?.components)
    }

    const getBlock = (components: BasicItem[] | undefined) => {
      for (const idx in components) {
        if (components[idx].components) {
          if (components[idx].key === props.selectkey) {
            components.splice(Number(idx), 1)
          } else {
            getBlock(components[idx].components)
          }
        } else {
          if (components[idx].key === props.selectkey) {
            components.splice(Number(idx), 1)
          }
        }
      }
    }

    return {
      handleDelete,
    }
  },
})
</script>

<style lang="less" scoped>
.tool-box {
  .left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #1890ff;
  }
  .top {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 0;
    border-top: 1px solid#1890ff;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-right: 1px solid#1890ff;
  }
  .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 0;
    border-bottom: 1px solid #1890ff;
  }
  .tool {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, -25px);
    .name {
      height: 25px;
      font-size: 14px;
      color: #ffffff;
      padding: 0 5px;
      margin-right: 10px;
      background-color: #1890ff;
    }
    .delete-icon {
      height: 25px;
      background-color: #1890ff;
      .icon {
        cursor: pointer;
        font-size: 14px;
        color: #ffffff;
        padding: 0 5px;
      }
    }
  }
}
</style>